<template>
    <div class="groups-container">
        <!-- 搜索区域 -->
        <div class="search-area">
            <el-button type="primary" :icon="Search" class="search-btn" @click="fetchGroups">查找</el-button>
        </div>

        <!-- 表格区域 -->
        <el-table :data="groupList" style="width: 100%" @selection-change="handleSelectionChange"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 'normal' }" v-loading="loading">
            <el-table-column type="selection" width="45" />
            <el-table-column prop="name" label="群名称" min-width="200" />
            <el-table-column prop="groupId" label="群ID" min-width="150" />
            <el-table-column prop="botStatus" label="机器人状态" width="100">
                <template #default="scope">
                    <el-tag :type="scope.row.botStatus === '正常' ? 'success' : 'danger'" class="status-tag">
                        {{ scope.row.botStatus }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="80">
                <template #default="scope">
                    <el-tag :type="scope.row.status === '启用' ? 'success' : 'info'" class="status-tag">
                        {{ scope.row.status }}
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <div class="pagination-container">
            <span class="total-text">共 {{ total }} 条</span>
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 50, 100]"
                layout="prev, pager, next, sizes" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" background class="custom-pagination" />
        </div>
    </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getGroups } from '../../api/group'
import { ElMessage } from 'element-plus'

export default {
    name: 'Groups',
    setup() {
        // 数据部分
        const groupList = ref([])
        const currentPage = ref(1)
        const pageSize = ref(20)
        const total = ref(0)
        const loading = ref(false)
        const selectedRows = ref([])
        // 添加轮询计时器引用
        let pollingTimer = null

        // 获取群列表
        const fetchGroups = async () => {
            loading.value = true
            try {
                const res = await getGroups()
                if (res.data.success) {
                    groupList.value = res.data.data
                    total.value = res.data.data.length
                } else {
                    ElMessage.error(res.data.message || '获取群列表失败')
                }
            } catch (error) {
                console.error('获取群列表错误:', error)
                ElMessage.error('获取群列表失败，请稍后重试')
            } finally {
                loading.value = false
            }
        }

        const handleSelectionChange = (selection) => {
            selectedRows.value = selection
        }

        const handleSizeChange = (val) => {
            pageSize.value = val
            fetchGroups()
        }

        const handleCurrentChange = (val) => {
            currentPage.value = val
            fetchGroups()
        }

        // 启动定时轮询
        const startPolling = () => {
            // 每30秒自动刷新一次数据
            pollingTimer = setInterval(fetchGroups, 30000)
        }

        // 停止轮询
        const stopPolling = () => {
            if (pollingTimer) {
                clearInterval(pollingTimer)
                pollingTimer = null
            }
        }

        // 组件挂载时获取数据
        onMounted(() => {
            fetchGroups()
            startPolling()
        })

        // 组件卸载前停止轮询
        onBeforeUnmount(() => {
            stopPolling()
        })

        return {
            Search,
            groupList,
            currentPage,
            pageSize,
            total,
            loading,
            fetchGroups,
            handleSelectionChange,
            handleSizeChange,
            handleCurrentChange
        }
    }
}
</script>

<style scoped>
.groups-container {
    background-color: #fff;
    border-radius: 2px;
    padding: 15px;
}

.search-area {
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-start;
}

.search-btn {
    height: 32px;
    padding: 0 15px;
    font-size: 13px;
}

.pagination-container {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.total-text {
    margin-right: 12px;
    color: #606266;
    font-size: 13px;
}

:deep(.el-table) {
    --el-table-border-color: #ebeef5;
    font-size: 13px;
}

:deep(.el-table th) {
    font-weight: normal;
    height: 40px;
    padding: 8px 0;
}

:deep(.el-table td) {
    padding: 8px 0;
}

:deep(.el-checkbox__inner) {
    width: 14px;
    height: 14px;
}

:deep(.status-tag) {
    height: 22px;
    padding: 0 8px;
    font-size: 12px;
}

:deep(.el-pagination) {
    font-size: 13px;
}

:deep(.el-pagination .el-select .el-input) {
    width: 100px;
}

:deep(.el-pagination button) {
    min-width: 28px;
    height: 28px;
}

:deep(.el-pagination .el-select .el-input__inner) {
    height: 28px;
}

:deep(.el-button--primary) {
    --el-button-bg-color: #1890ff;
    --el-button-border-color: #1890ff;
    --el-button-hover-bg-color: #40a9ff;
    --el-button-hover-border-color: #40a9ff;
}
</style>